<template>
	<view>
		<view class="list">
			<view class="item" :style="{marginTop:i.top?i.top:'1rpx'}" v-for="(i,index) in config" @tap='get_focus(i,index)'>
				<view class="all_input">
					<view class="view">{{i.title}}</view>
					<input type="text" v-if="isEdit&&!(i.customize)&&!(i.items)" :focus='true' v-model="value[i.key]" placeholder="请输入" @input='blur' />
					<view class="input" v-else-if="i.customize">{{value[i.key]?value[i.key]:i.customize_info?i.customize_info:'请选择'}}
						<!-- <image  :style="{transform:focus_index==index?'rotate(90deg)':'rotate(0deg)'}" src="../../static/jinru33.png"></image> -->
					</view>
					<view class="input" v-else-if="i.items">{{(value[i.key]||value[i.key] == 0)?i.items[value[i.key]]:'请选择'}}{{i.supplement&&value[i.supplement.key]?':'+value[i.supplement.key]:''}}
						<!-- <image v-if="isEdit" :style="{transform:focus_index==index?'rotate(90deg)':'rotate(0deg)' }" src="../../static/jinru33.png"></image> -->
					</view>
					<view class="input" v-else>{{value[i.key]||'请输入'}}</view>
				</view>
				<scroll-view scroll-y="true" class="options" v-if="i.items" :style="{height:focus_index == index?'300rpx':'0rpx'}">
					<view class="options_item" v-for="(v,k) in i.items">
						<input @tap.stop @focus="tap_options(k,i)" v-if='i.supplement&&i.supplement.item == k' type="text" v-model="value[i.supplement.key]"
						 :placeholder="v" @input='blur'/>
						<view v-else @tap='tap_options(k,i)'>{{v}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Array,
				default: []
			},
			// data:[
			// 自定义点击模式
			// 	{	
			// 			key: 'password', 字段
			// 			title: '密码',   标题
			// 			customize:true,  是否自定义点击事件 若设置 customize:true, 则点击自定义项时触发@customize 事件
			// 			customize_info:'修改密码', 自定义点击事件显示的提示内容	
			// 	},
			// 选择模式
			// 	{	
			// 			key: 'gender',	字段
			// 			title: '性别',	标题
			// 			items: {		items 单选功能 单选列表
			// 				0: '男',		单选项 key:value
			//			 	1: '女'		
			// 			}
			// 	}，
			// 普通输入模式
			// 	{	
			// 			key: 'user_name', 字段
			// 			title: '姓名',	  标题
			// 	}
			// ]
			data: {
				type: Object,
				default: {}
			},
			isEdit: {
				type: Boolean,
				default: true
			}
		},
		watch:{
			data: {
			      handler(val) {
					  this.setvalue(val)
			      },
				  //首次获取值也可以触发
			      immediate: true,
				  //深度监听可以监听数组 对象
			      deep: true
			    }
		},
		data() {
			return {
				focus_index: null,
				value: {},
			};
		},
		created() {
			this.setvalue(this.data)
		},
		methods: {
			setvalue(data){
				this.$set(this, 'value', data)
			},
			blur() {
				// this.focus_index = null
				this.$emit('update:data', this.value)
				this.$emit('change', this.value)
			},
			get_focus(item, index) {
				if (this.isEdit) {
					if (item.customize) {
						this.$emit('customize', item, index)
						return
					}
					if (this.focus_index == index) {
						this.focus_index = null
					} else {
						this.focus_index = index
					}
				}
			},
			tap_options(k, item) {
				let data = { ...this.value
				}
				data[item.key] = k
				this.$set(this, 'value', data)
				this.$emit('update:data', this.value)
				this.$emit('change', this.value)
				if (item.supplement) {
					if (!(k == item.supplement.item)) {
						delete this.value[item.supplement.key]
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
	}


	.item {
		display: flex;
		flex-direction: column;

		background-color: #fff;
		transition: 0.2s;

		&:active {
			background-color: #f2f2f2;
		}

		.all_input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 30rpx;

			// background-color: #fff;
		}

		.view {
			padding: 30rpx 0;
			font-size: 14px;
			flex: 1;
			color: #333333;
		}

		.text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 0;
			overflow: hidden;
			font-size: 14px;
			color: #999;
		}

		.options {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 0rpx;
			transition: 0.3s;
			background-color: #eee;

			.options_item {
				display: flex;
				background-color: #fff;
				margin-top: 5rpx;

				view {
					color: #0078FF;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
					padding: 0 30rpx;
					height: 100rpx;
				}

				input {
					padding: 0 30rpx;
					height: 100rpx;
					text-align: center;
					width: 100%;
				}

				&:active {
					background-color: #f2f2f2;
				}
			}
		}

		.input {
			display: flex;
			align-items: center;
			color: #999;

			image {
				transition: 0.3s;
				margin-left: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		input {
			text-align: right;
		}
	}
</style>
